<template>
    <div>
        <el-tooltip placement="left" content="检测在线状态">
            <div v-show="!statusLoading">
                <img @click="isCheckStatus"
                    v-if="currentRow.isOnline == 1"
                    src="@/assets/image/online.png"
                    alt=""
                />
                <img v-else-if="currentRow.isOnline ==0" @click="isCheckStatus" src="@/assets/image/offline.png" alt="" />
            </div>
            <i class="el-icon-loading" v-show="statusLoading"></i>
        </el-tooltip>
    </div>
</template>

<script>
import { equipment } from "@/api/factuer";
export default {
    props: {
        currentRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            statusLoading: false,
        };
    },
    watch: {
        currentRow: {
            handler(val) {
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        isCheckStatus() {
            this.statusLoading = true;
            equipment(`/detect/offline/${this.currentRow.id}`, "post")
                .then((res) => {
                    if (res.data == true) {
                        this.$message.success("在线状态已更新！");
                        this.$emit("updateStatus");
                    } else if (res.data == false) {
                        this.$message.warning("状态一致，无需更新！");
                    }
                })
                .finally(() => (this.statusLoading = false));
        },
    },
};
</script>

<style lang="scss" scoped>
img {
    width: 20px;
    margin-left: 10px;
    position: relative;
    top: 4px;
}
.el-icon-loading {
    margin-left: 10px;
}
</style>
